---
import type { CollectionEntry } from 'astro:content'
import { POSTS_CONFIG } from '~/config'

interface Props {
  prev: CollectionEntry<'posts'> | null
  next: CollectionEntry<'posts'> | null
}

const { prev, next } = Astro.props
---

<nav class="flex flex-col sm:flex-row justify-between gap-6 pt-2 border-t border-border/50">
  {
    next && (
      <a href={`/posts/${next.id}`} class="group flex-1 relative">
        <div class="absolute -left-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-hover:-translate-x-1 transition-all duration-200">
          <span class="icon-[ph--arrow-left] size-4 text-primary" />
        </div>
        <div class="group-hover:pl-6 transition-all duration-200">
          <span class="text-[10px] uppercase tracking-widest text-muted-foreground/70">{POSTS_CONFIG.prevPostText}</span>
          <p class="mt-1.5 font-semibold text-base text-foreground/90 group-hover:text-primary transition-colors line-clamp-1">
            {next.data.title}
          </p>
        </div>
      </a>
    )
  }

  {
    prev && (
      <a href={`/posts/${prev.id}`} class="group flex-1 relative text-right">
        <div class="absolute -right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 group-hover:translate-x-1 transition-all duration-200">
          <span class="icon-[ph--arrow-right] size-4 text-primary" />
        </div>
        <div class=" group-hover:pr-6 transition-all duration-200">
          <span class="text-[10px] uppercase tracking-widest text-muted-foreground/70">{POSTS_CONFIG.nextPostText}</span>
          <p class=" mt-1.5 font-semibold text-base text-foreground/90 group-hover:text-primary transition-colors line-clamp-1">
            {prev.data.title}
          </p>
        </div>
      </a>
    )
  }
</nav>
